  <input id="checkbox_toggle" type="checkbox" class="check">
<div class="checkbox">
  <label class="slide" for="checkbox_toggle">
    <label class="toggle" for="checkbox_toggle"></label>
    <label class="text" for="checkbox_toggle">Day</label>
    <label class="text" for="checkbox_toggle">Night</label>
  </label>
</div>
<style>
/* From Uiverse.io by AmIt-DasIT - Tags: switch, animated */
.checkbox {
  width: 223px;
  height: 60px;
  background-color: #d0d0d0;
  border-radius: 30px;
  position: relative;
  color: black;
  overflow: hidden;
}

#checkbox_toggle {
  display: none;
}

.checkbox .toggle {
  width: 100px;
  height: 50px;
  position: absolute;
  border-radius: 30px;
  left: 5px;
  cursor: pointer;
  background: linear-gradient(40deg, #FF0080,#FF8C00 70%);
  transition: 0.4s;
  box-shadow: 0px 0px 3px rgb(255, 255, 20), 0px 0px 5px rgb(255, 255, 20);
}

.checkbox .slide {
  width: 230px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  cursor: pointer;
}

.checkbox .slide .text {
  font-size: 16px;
  font-weight: 700;
  z-index: 100;
  cursor: pointer;
}

.check:checked + .checkbox .slide .toggle {
  transform: translateX(113px);
  background: linear-gradient(40deg, #8983F7, #A3DAFB 70%);
  box-shadow: -0px -0px 10px #8983F7, -0px -0px 3px #8983F7;
}

.check:checked + .checkbox .slide {
  background-color: #0a1929;
  color: #fff;
}
</style>
